<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-button type="primary" @click="addDialogVisible = true">添加</el-button>
                </el-col>
                <el-col :span="18">
                    <el-button-group>
                        <el-button v-for="item in weekList" :type="item == activeWeek ? 'success' : 'primary'"
                            @click="getAcgList('',item)">{{ item }}</el-button>
                    </el-button-group>
                </el-col>
                <el-clo>
                    <el-switch v-model="acgStatus" active-text="现今" @click="getAcgList('',activeWeek)" inactive-text="过往" />
                </el-clo>
            </el-row>
        </template>



        <el-table :data="acgList" style="width: 100%">
            <el-table-column prop="name" label="动漫名称"  width="350"/>
            <!-- <el-table-column prop="search_name" label="搜索名称"  width="220"/> -->
            <el-table-column prop="level" label="集数" width="80"  />
            <el-table-column  label="搜索" width="80" >
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="searchAcgItem(scope.row.search_name)">搜索</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" size="small" v-if="scope.row.status == 1"
                        @click="updateAcgItem(scope.row,'add')">+1集</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.status == 1"
                        @click="updateAcgItem(scope.row,'dec')">-1集</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.status == 1"
                        @click="updateAcgItem(scope.row,'over')">完结</el-button>
                    <el-button link type="primary" size="small" v-if="scope.row.status == 0"
                            @click="updateAcgItem(scope.row, 'reopen')">重新开启</el-button>
                </template>
            </el-table-column>
        </el-table>

    </el-card>


    <!-- 添加对话框 -->
    <el-dialog title="添加" v-model="addDialogVisible" width="60%" align-center>

        <el-form :model="addForm" label-position="right" label-width="80px">
            <el-form-item label="动漫名称">
                <el-input v-model="addForm.name" placeholder="动漫名称" />
            </el-form-item>
            <el-form-item label="搜索名称">
                <el-input v-model="addForm.search_name" placeholder="搜索名称" />
            </el-form-item>
            <el-form-item label="追更日期">
                <el-checkbox-group v-model="selectList">
                    <el-checkbox-button v-for="week in weekList" :key="week" :label="week">{{ week }}</el-checkbox-button>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="追更集数">
                <el-input-number v-model="addForm.level" placeholder="追更集数" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addFormOp">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 修改对话框 -->
    <!-- <el-dialog title="修改" v-model="editDialogVisible" width="60%" align-center>

        <el-form :model="editForm" label-position="right" label-width="80px">
            <el-form-item label="事件主题">
                <el-input v-model="editForm.name" placeholder="事件主题" />
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input v-model="editForm.content" :rows="2" type="textarea" placeholder="事件内容" />
            </el-form-item>
            <el-form-item label="事件日期">
                <el-date-picker v-model="editForm.time_string" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
                    placeholder="时间日期" />
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="editFormOp">确认</el-button>
            </span>
        </template>
    </el-dialog> -->
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { AcgCreateGo, AcgUpdateGo, AcgItemGo, AcgListGo, AcgSearchGo } from '../wailsjs/go/utool/App'
import { ElNotification } from 'element-plus';
import { Edit } from '@element-plus/icons-vue'

// ----数据定义区域 START----
let weekList = ref(['一', '二', '三', '四', '五', '六', '日'])
let selectList = ref([])
let activeWeek = ref('一')
let searchName = ref('')
let acgStatus = ref(true)
const operation = {
    add: function (item: any) {
        item.level++
        return item
    },
    dec: function (item: any) {
        item.level--
        return item
    },
    over: function (item: any) {
        item.status = 0
        return item
    },
    reopen: function (item: any) {
        item.status = 1
        return item
    }
}
let opMap = new Map([
    ['add', operation.add],
    ['dec', operation.dec],
    ['over', operation.over],
    ['reopen', operation.reopen],
])


let addDialogVisible = ref(false)
let editDialogVisible = ref(false)
const addForm = reactive({
    id: 0,
    name: '',
    search_name: '',
    week: '',
    level: 1,
    status: 1,
    create_time: '',
    update_time: '',
})
let editForm = reactive({
    id: 0,
    name: '',
    search_name: '',
    week: '',
    level: 1,
    status: 1,
    create_time: '',
    update_time: '',
})
let acgList = ref()
// ----数据定义区域 END----

// ----方法定义区域 START----
const getAcgList = (searchName: string, weekDay?: string) => {
    if (weekDay == undefined) {
        weekDay = activeWeek.value
    } else {
        activeWeek.value = weekDay
    }
    // 获取ACG列表
    AcgListGo(searchName, weekDay, acgStatus.value ? 1 : 0).then((res: any) => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        acgList.value = res.data
    })


}
const addFormOp = () => {
    // console.log(addForm,9999)
    if (addForm.name == '' || addForm.search_name == '' || addForm.level < 1 || selectList.value.length == 0) {
        ElNotification.error({
            title: '请填写完整信息',
        })
        return
    }
    addForm.week = selectList.value.join(',')
    AcgCreateGo(addForm).then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        ElNotification.success({
            title: res.msg,
        })
        addDialogVisible.value = false
        resetData()
        getAcgList("",activeWeek.value)
    })
}

const updateAcgItem = (item: any, op: string) => {
    let opreation = opMap.get(op)
    if(opreation == undefined){
        ElNotification.error({
            title: '未知的操作',
        })
        return
    } else {
        item = opreation(item)
        AcgUpdateGo(item).then(res => {
            if (res.code != 1) {
                ElNotification.error({
                    title: res.msg,
                })
                return
            }
            getAcgList("", activeWeek.value)
        })
    }
}

const searchAcgItem = (acgName: string) => {
    AcgSearchGo(acgName)
}

const editFormOp = () => {
    /* if (editForm.name == '' || editForm.content == '' || editForm.time_string == '') {
        ElNotification.error({
            title: '请填写完整信息',
        })
        return
    }

    TimeLineEditGo(editForm).then(res => {
        if (res.code != 1) {
            ElNotification.error({
                title: res.msg,
            })
            return
        }
        ElNotification.success({
            title: res.msg,
        })
        editDialogVisible.value = false
        getAcgList(activeWeek.value)
    }) */
}


const resetData = () => {
    addForm.id = 0
    addForm.name = ''
    addForm.search_name = ''
    addForm.week = ''
    addForm.level = 1
    addForm.status = 1
    addForm.create_time = ''
    addForm.update_time = ''

    selectList.value = []

}
// ----方法定义区域 END----


getAcgList(searchName.value, activeWeek.value)

</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.edit {
    display: inline;
}</style>